<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Mootools UI - combobox demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="../mootools-1.2-core-nc.js"></script>
    <script type="text/javascript" src="../mui.text.js"></script>
    <script type="text/javascript" src="../mui.combobox.js"></script>
    <script type="text/javascript"><!-- <![CDATA[

    /*var combo = new MUI.CompleteAbleInput(null, {animate:true, writeable:true});
    combo.data.set("lang", "HTML");
    combo.data.set("lang1", "JS");
    combo.data.set("lang2", "CSS");*/
    
    window.addEvent("domready", function(){
	//combo.injectInside(document.body);
	$("cb1").makeAsCompleteAble();
    });
    
    // ]]> --></script>
    
    <style type="text/css">/* <![CDATA[ */
	div.mui-combobox{
	    width:200px;
	    height:1em;
	    cursor: default;
	    position:relative;
	}
	
	.mui-combobox-chosen-item{
	    display:block;
	    background-color: #EFEFEF;
	    width:99%;
	    height:1em;
	    border-bottom:1px solid #E0E0E0;
	    font-weight:bold;
	    padding:0.2em;
	}
	
	div.mui-combobox ul{
	    list-style:none;
	    display:block;
	    margin:0;
	    padding:0.2em;
	    position:absolute;
	    left:0;
	    width:100%;
	    background-color:#FFF;
	    border:1px solid #E0E0E0;
	    overflow:auto;
	    height:2em;
	    
	}

	div.mui-combobox ul li{
	    display:block;
	    cursor: default;
	    width:98%;
	    padding:0.1em 1%;
	    border-bottom:1px solid #E0E0E0;	    
	}
	
	div.mui-combobox ul li:hover{
	    background-color: #EAEAEA;
	}
	
	.mui-combobox-resizer{
	    position:absolute;
	    display:none;
	    z-index:100;
	    text-align:right;
	    opacity:0.4;
	    border:1px solid black;
	    width:20px;
	    height:20px;
	}
	
    /* ]]> */</style>
</head>
<body>
    
<div class="mui-combobox" id="cb1">
    <input type="text" class="mui-combobox-chosen-item" />
    <ul>
	<li realvalue="1">israel</li>
	<li realvalue="2">usa</li>
	<li realvalue="3">uk</li>
    </ul>
    <input type="hidden" name="num" value="1" />
</div>
    
</body>
</html>
